<template>
  <el-form-item label="offer信息：" class="section-title" />

  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="预计入职日期：">
        <span>{{ FirstData.joinTime }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="期望薪资：">
        <span>{{ FirstData.expectedSalary }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="最终薪资：">
        <span>{{ FirstData.finalSalary }}</span>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="offer状态：">
        <span>{{
          FirstData.offerStatus == 0
            ? "接受"
            : FirstData.offerStatus == 1
            ? "拒绝"
            : ""
        }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="24">
      <el-form-item label="备注：">
        <span>{{ FirstData.remarks }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <el-form-item label="录用通知：">
    <!-- hireFile -->
    <!-- <div class="attachment-file">
      <div class="file-attachment" v-if="FirstData.hireFile">
        <div class="file-item">
          <el-icon><Document /></el-icon>
          <span class="file-name" @click="seeFileView(FirstData.hireFile)">{{
            getFileName(FirstData.hireFile)
          }}</span>
        </div>
      </div>
      <span v-else style="font-size: 12px">暂无附件</span>
    </div> -->

    <!-- {{ FirstData.hireFile }} -->
    <attachment 
    v-if="FirstData.hireFile && FirstData.hireFile != null" :employeeResignFileVoList="FirstData.hireFile"> </attachment>
  </el-form-item>
</template>

<script setup>
import { Document } from "@element-plus/icons-vue";
import { seeFileView, getFileName } from "@/utils/fileView.js";
import attachment from "@/components/attachment.vue";
const props = defineProps({
  FirstData: Array,
  sys_interview_method: Array,
});
</script>

<style scoped lang="scss">
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}
.attachment-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 14px;
  text-align: left;
  margin-left: 30px;
}

.attachment-label {
  font-weight: bold;
  color: #16191d;
  margin-bottom: 10px;
  font-size: 14px;
}
.attachment-section {
  margin-bottom: 20px;
}

.file-attachment {
  width: 100%;
  max-width: 200px;
  font-size: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 1px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.file-item .el-icon {
  margin-right: 10px;
  color: #409eff;
}

.file-name {
  max-width: 180px; /* 设置最大宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */

  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.file-name:hover {
  text-decoration: underline;
}
span {
  font-size: 14px;
  font-weight: 400;
  color: #16191d;
}

:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-textarea__inner) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-select__suffix) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-textarea__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-input.is-disabled) {
  cursor: auto;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}
</style>
